/* 文字 */
.text-xs {

  font-size: 20rpx;
  
  }
  
  .text-sm {
  
  font-size: 24rpx;
  
  }
  
  .text-df {
  
  font-size: 28rpx;
  
  }
  
  .text-lg {
  
  font-size: 32rpx;
  
  }
  
  .text-xl {
  
  font-size: 36rpx;
  
  }
  
  .text-xxl {
  
  font-size: 44rpx;
  
  }
  
  .text-sl {
  
  font-size: 80rpx;
  
  }
  
  .text-xsl {
  
  font-size: 120rpx;
  
  }
  
  .text-cut {
  
  text-overflow: ellipsis;
  
  white-space: nowrap;
  
  overflow: hidden;
  
  }
  
  .text-bold {
  
  font-weight: bold;
  
  }
  
  .text-center {
  
  text-align: center;
  
  }
/* 文字 */


/* 颜色 */
.red {
  color: #e54d42;
}

.orange {
  color: #f37b1d;
}

.yellow {
  color: #fbbd08;
}

.olive {
  color: #8dc63f;
}

.green {
  color: #39b54a;
}

.cyan {
  color: #1cbbb4;
}

.blue {
  color: #356CEB;
}

.purple {
  color: #6739b6;
}

.mauve {
  color: #9c26b0;
}

.pink {
  color: #e03997;
}

.brown {
  color: #a5673f;
}

.grey {
  color: #8799a3;
}

.black {
  color: #333333;
}

.darkGray {
  color: #666666;
}

.gray {
  color: #aaaaaa;
}

.ghostWhite {
  color: #f1f1f1;
}

.white {
  color: #ffffff;
}

/* 浅色 */

.redLight {
  background-color: #fadbd9;
}

.orangeLight {
  background-color: #fde6d2;
}

.yellowLight {
  background-color: #fef2ce;
}

.oliveLight {
  background-color: #e8f4d9;
}

.greenLight {
  background-color: #d7f0db;
}

.cyanLight {
  background-color: #d2f1f0;
}

.blueLight {
  background-color: #EDF3FD;
}

.purpleLight {
  background-color: #e1d7f0;
}

.mauveLight {
  background-color: #ebd4ef;
}

.pinkLight {
  background-color: #f9d7ea;
}

.brownLight {
  background-color: #ede1d9;
}

.greyLight {
  background-color: #e7ebed;
}

/* 渐变色 */

.gradualRed {
  background: linear-gradient(45deg, #f43f3b, #ec008c);
}

.gradualOrange {
  background: linear-gradient(45deg, #ff9700, #ed1c24);
}

.gradualGreen {
  background: linear-gradient(45deg, #39b54a, #8dc63f);
}

.gradualPurple {
  background: linear-gradient(45deg, #9000ff, #5e00ff);
}

/* 颜色 */


/* 文字颜色 */
.text-red {
  color: #e54d42;
}

.text-orange {
  color: #f37b1d;
}

.text-yellow {
  color: #fbbd08;
}

.text-olive {
  color: #8dc63f;
}

.text-green {
  color: #39b54a;
}

.text-cyan {
  color: #1cbbb4;
}

.text-blue {
  color: #356CEB;
}


.text-purple {
  color: #6739b6;
}

.text-mauve {
  color: #9c26b0;
}

.text-pink {
  color: #e03997;
}

.text-brown {
  color: #a5673f;
}

.text-grey {
  color: #8799a3;
}

.text-black {
  color: #333333;
}

.text-darkGray {
  color: #666666;
}

.text-gray {
  color: #aaaaaa;
}

.text-ghostWhite {
  color: #f1f1f1;
}

.text-white {
  color: #ffffff;
}

/* 文字颜色 */


/* xs:10rpx;sm:20rpx;默认df:30rpx;lg:40rpx;xl:50rpx; */

/* -- flex弹性布局 -- */

.flex {

display: flex;

}

.basis-xs {

flex-basis: 20%;

}

.basis-sm {

flex-basis: 40%;

}

.basis-df {

flex-basis: 50%;

}

.basis-lg {

flex-basis: 60%;

}

.basis-xl {

flex-basis: 80%;

}

.flex-sub {

flex: 1;

}

.flex-twice {

flex: 2;

}

.flex-treble {

flex: 3;

}

.flex-direction {

flex-direction: column;

}

.flex-wrap {

flex-wrap: wrap;

}

.align-start {

align-items: flex-start;

}

.align-end {

align-items: flex-end;

}

.align-center {

align-items: center;

}

.align-stretch {

align-items: stretch;

}

.self-start {

align-self: flex-start;

}

.self-center {

align-self: flex-center;

}

.self-end {

align-self: flex-end;

}

.self-stretch {

align-self: stretch;

}

.align-stretch {

align-items: stretch;

}

.justify-start {

justify-content: flex-start;

}

.justify-end {

justify-content: flex-end;

}

.justify-center {

justify-content: center;

}

.justify-between {

justify-content: space-between;

}

.justify-around {

justify-content: space-around;

}

/* grid布局 */

.grid {

display: flex;

flex-wrap: wrap;

}

.grid.grid-square {

overflow: hidden;

}

.grid.grid-square .cu-tag {

position: absolute;

right: 0;

top: 0;

border-bottom-left-radius: 6rpx;

padding: 6rpx 12rpx;

height: auto;

background-color: rgba(0, 0, 0, 0.5);

}

.grid.grid-square>view>text[class*="cuIcon-"] {

font-size: 52rpx;

position: absolute;

color: var(--grey);

margin: auto;

top: 0;

bottom: 0;

left: 0;

right: 0;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}

.grid.grid-square>view {

margin-right: 20rpx;

margin-bottom: 20rpx;

border-radius: 6rpx;

position: relative;

overflow: hidden;

}

.grid.grid-square>view.bg-img image {

width: 100%;

height: 100%;

position: absolute;

}

.grid.col-1.grid-square>view {

padding-bottom: 100%;

height: 0;

margin-right: 0;

}

.grid.col-2.grid-square>view {

padding-bottom: calc((100% - 20rpx)/2);

height: 0;

width: calc((100% - 20rpx)/2);

}

.grid.col-3.grid-square>view {

padding-bottom: calc((100% - 40rpx)/3);

height: 0;

width: calc((100% - 40rpx)/3);

}

.grid.col-4.grid-square>view {

padding-bottom: calc((100% - 60rpx)/4);

height: 0;

width: calc((100% - 60rpx)/4);

}

.grid.col-5.grid-square>view {

padding-bottom: calc((100% - 80rpx)/5);

height: 0;

width: calc((100% - 80rpx)/5);

}

.grid.col-2.grid-square>view:nth-child(2n),

.grid.col-3.grid-square>view:nth-child(3n),

.grid.col-4.grid-square>view:nth-child(4n),

.grid.col-5.grid-square>view:nth-child(5n){

margin-right: 0;

}

.grid.col-1>view {

width: 100%;

}

.grid.col-2>view {

width: 50%;

}

.grid.col-3>view {

width: 33.33%;

}

.grid.col-4>view {

width: 25%;

}

.grid.col-5>view {

width: 20%;

}

/* -- 内外边距 -- */

.margin-0 {

margin: 0;

}

.margin-xs {

margin: 10rpx;

}

.margin-sm {

margin: 20rpx;

}

.margin {

margin: 30rpx;

}

.margin-lg {

margin: 40rpx;

}

.margin-xl {

margin: 50rpx;

}

.margin-top-xs {

margin-top: 10rpx;

}

.margin-top-sm {

margin-top: 20rpx;

}

.margin-top {

margin-top: 30rpx;

}

.margin-top-lg {

margin-top: 40rpx;

}

.margin-top-xl {

margin-top: 50rpx;

}

.margin-right-xs {

margin-right: 10rpx;

}

.margin-right-sm {

margin-right: 20rpx;

}

.margin-right {

margin-right: 30rpx;

}

.margin-right-lg {

margin-right: 40rpx;

}

.margin-right-xl {

margin-right: 50rpx;

}

.margin-bottom-xs {

margin-bottom: 10rpx;

}

.margin-bottom-sm {

margin-bottom: 20rpx;

}

.margin-bottom {

margin-bottom: 30rpx;

}

.margin-bottom-lg {

margin-bottom: 40rpx;

}

.margin-bottom-xl {

margin-bottom: 50rpx;

}

.margin-left-xs {

margin-left: 10rpx;

}

.margin-left-sm {

margin-left: 20rpx;

}

.margin-left {

margin-left: 30rpx;

}

.margin-left-lg {

margin-left: 40rpx;

}

.margin-left-xl {

margin-left: 50rpx;

}

.margin-lr-xs {

margin-left: 10rpx;

margin-right: 10rpx;

}

.margin-lr-sm {

margin-left: 20rpx;

margin-right: 20rpx;

}

.margin-lr {

margin-left: 30rpx;

margin-right: 30rpx;

}

.margin-lr-lg {

margin-left: 40rpx;

margin-right: 40rpx;

}

.margin-lr-xl {

margin-left: 50rpx;

margin-right: 50rpx;

}

.margin-tb-xs {

margin-top: 10rpx;

margin-bottom: 10rpx;

}

.margin-tb-sm {

margin-top: 20rpx;

margin-bottom: 20rpx;

}

.margin-tb {

margin-top: 30rpx;

margin-bottom: 30rpx;

}

.margin-tb-lg {

margin-top: 40rpx;

margin-bottom: 40rpx;

}

.margin-tb-xl {

margin-top: 50rpx;

margin-bottom: 50rpx;

}

.padding-0 {

padding: 0;

}

.padding-xs {

padding: 10rpx;

}

.padding-sm {

padding: 20rpx;

}

.padding {

padding: 30rpx;

}

.padding-lg {

padding: 40rpx;

}

.padding-xl {

padding: 50rpx;

}

.padding-top-xs {

padding-top: 10rpx;

}

.padding-top-sm {

padding-top: 20rpx;

}

.padding-top {

padding-top: 30rpx;

}

.padding-top-lg {

padding-top: 40rpx;

}

.padding-top-xl {

padding-top: 50rpx;

}

.padding-right-xs {

padding-right: 10rpx;

}

.padding-right-sm {

padding-right: 20rpx;

}

.padding-right {

padding-right: 30rpx;

}

.padding-right-lg {

padding-right: 40rpx;

}

.padding-right-xl {

padding-right: 50rpx;

}

.padding-bottom-xs {

padding-bottom: 10rpx;

}

.padding-bottom-sm {

padding-bottom: 20rpx;

}

.padding-bottom {

padding-bottom: 30rpx;

}

.padding-bottom-lg {

padding-bottom: 40rpx;

}

.padding-bottom-xl {

padding-bottom: 50rpx;

}

.padding-left-xs {

padding-left: 10rpx;

}

.padding-left-sm {

padding-left: 20rpx;

}

.padding-left {

padding-left: 30rpx;

}

.padding-left-lg {

padding-left: 40rpx;

}

.padding-left-xl {

padding-left: 50rpx;

}

.padding-lr-xs {

padding-left: 10rpx;

padding-right: 10rpx;

}

.padding-lr-sm {

padding-left: 20rpx;

padding-right: 20rpx;

}

.padding-lr {

padding-left: 30rpx;

padding-right: 30rpx;

}

.padding-lr-lg {

padding-left: 40rpx;

padding-right: 40rpx;

}

.padding-lr-xl {

padding-left: 50rpx;

padding-right: 50rpx;

}

.padding-tb-xs {

padding-top: 10rpx;

padding-bottom: 10rpx;

}

.padding-tb-sm {

padding-top: 20rpx;

padding-bottom: 20rpx;

}

.padding-tb {

padding-top: 30rpx;

padding-bottom: 30rpx;

}

.padding-tb-lg {

padding-top: 40rpx;

padding-bottom: 40rpx;

}

.padding-tb-xl {

padding-top: 50rpx; 

padding-bottom: 50rpx;

}

/* 背景 */

.bg-red {
	background-color: #e54d42;
	color: #ffffff;
}

.bg-orange {
	background-color: #f37b1d;
	color: #ffffff;
}

.bg-yellow {
	background-color: #fbbd08;
	color: #333333;
}

.bg-olive {
	background-color: #8dc63f;
	color: #ffffff;
}

.bg-green {
	background-color: #39b54a;
	color: #ffffff;
}

.bg-cyan {
	background-color: #1cbbb4;
	color: #ffffff;
}

.bg-blue {
	background-color: #0081ff;
	color: #ffffff;
}

.bg-purple {
	background-color: #6739b6;
	color: #ffffff;
}

.bg-mauve {
	background-color: #9c26b0;
	color: #ffffff;
}

.bg-pink {
	background-color: #e03997;
	color: #ffffff;
}

.bg-brown {
	background-color: #a5673f;
	color: #ffffff;
}

.bg-grey {
	background-color: #8799a3;
	color: #ffffff;
}

.bg-gray {
	background-color: #f0f0f0;
	color: #333333;
}

.bg-black {
	background-color: #333333;
	color: #ffffff;
}

.bg-white {
	background-color: #ffffff;
	color: #666666;
}

.bg-shadeTop {
	background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
	color: #ffffff;
}

.bg-shadeBottom {
	background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
	color: #ffffff;
}

.bg-red.light {
	color: #e54d42;
	background-color: #fadbd9;
}

.bg-orange.light {
	color: #f37b1d;
	background-color: #fde6d2;
}

.bg-yellow.light {
	color: #fbbd08;
	background-color: #fef2ced2;
}

.bg-olive.light {
	color: #8dc63f;
	background-color: #e8f4d9;
}

.bg-green.light {
	color: #39b54a;
	background-color: #d7f0dbff;
}

.bg-cyan.light {
	color: #1cbbb4;
	background-color: #d2f1f0;
}

.bg-blue.light {
	color: #0081ff;
	background-color: #cce6ff;
}

.bg-purple.light {
	color: #6739b6;
	background-color: #e1d7f0;
}

.bg-mauve.light {
	color: #9c26b0;
	background-color: #ebd4ef;
}

.bg-pink.light {
	color: #e03997;
	background-color: #f9d7ea;
}

.bg-brown.light {
	color: #a5673f;
	background-color: #ede1d9;
}

.bg-grey.light {
	color: #8799a3;
	background-color: #e7ebed;
}

.bg-gradual-red {
	background-image: linear-gradient(45deg, #f43f3b, #ec008c);
	color: #ffffff;
}

.bg-gradual-orange {
	background-image: linear-gradient(45deg, #ff9700, #ed1c24);
	color: #ffffff;
}

.bg-gradual-green {
	background-image: linear-gradient(45deg, #39b54a, #8dc63f);
	color: #ffffff;
}

.bg-gradual-purple {
	background-image: linear-gradient(45deg, #9000ff, #5e00ff);
	color: #ffffff;
}

.bg-gradual-pink {
	background-image: linear-gradient(45deg, #ec008c, #6739b6);
	color: #ffffff;
}

.bg-gradual-blue {
	background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
	color: #ffffff;
}

/* 背景 */